import React, { PureComponent } from 'react';
import moment from 'moment';
import { Button, Form, Input, Modal,  Divider,Card,Switch,Badge,message  } from 'antd';
import {Map, Marker, NavigationControl,MapTypeControl,ScaleControl,OverviewMapControl, InfoWindow,TrafficLayer,Road} from 'react-bmap'  ;
import DescriptionList from '../../DescriptionList/index';
import MsgImage from '../MsgImage'
import styles from './index.less';
const FormItem = Form.Item;
const { TextArea } = Input;
const { Description } = DescriptionList;
//消息来源
const sourceMap = ['来自微信', '来自APP','平台发布','来自webApp'];
//是否审核
const auditMap = ["待审","已审待播","已审已播","导播忽略","主播忽略"];
//消息类型
const messageTypeMap = ['互动','寻人','寻物','车辆求助','寻找失主','其他'];

class MsgWeiXinDetail extends PureComponent {
  state = {
  };
  render() {
    const {selectedRowData} = this.props;
    return (
      <div style={{height: "auto",}}>
        <Card bordered={false} style={{paddingBottom:0}}>
          <DescriptionList  col={2}>
            <Description term="时间">{moment(selectedRowData.msgTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="审核">{auditMap[selectedRowData.status]}</Description>
            <Description term="类型">{messageTypeMap[selectedRowData.msgType]}</Description>
            <Description term="来源">{sourceMap[selectedRowData.messageFrom]}</Description>
          </DescriptionList>
          {/*<DescriptionList style={{marginBottom: 16}} col={2}>*/}
            {/*<Description term="路况位置和方向"></Description>*/}
            {/*/!*<Description term="实时路况">*!/*/}
              {/*/!*<div>*!/*/}
                {/*/!*<Switch defaultChecked onChange={this.openShishiRold}/>*!/*/}
              {/*/!*</div>*!/*/}
              {/*/!*<div>*!/*/}
                {/*/!*<Badge status="error" text="拥堵"/>*!/*/}
                {/*/!*<Badge status="warning" text="缓行"/>*!/*/}
                {/*/!*<Badge status="success" text="通常"/>*!/*/}
              {/*/!*</div>*!/*/}
            {/*/!*</Description>*!/*/}
          {/*</DescriptionList>*/}
        </Card>

        <Divider style={{marginLeft:24,marginTop:0}}/>
        {
          (selectedRowData.positionCoor == null || selectedRowData.positionCoor == "") ? (
            <div style={{paddingLeft:24}}>
              <DescriptionList style={{marginBottom: 2}} col={2}>
                <Description term="路况位置和方向"></Description>
                <Description term="实时路况" style={{paddingLeft:96}}>
                  <div>
                    <Switch defaultChecked onChange={this.openShishiRold}/>
                  </div>
                  <div>
                    <Badge status="error" text="拥堵"/>
                    <Badge status="warning" text="缓行"/>
                    <Badge status="success" text="通常"/>
                  </div>
                </Description>
              </DescriptionList>
            <Card style={{ backgroundColor:"#000",background:  "rgba(0, 0, 0, 0.5)"}}>
              <Map center={{ lng: 87.490354 ,lat: 43.853289}}
                   zoom="18"
              >
                <div style={{width: "100%", height: "100%",position: 'absolute', left: '0px', top: '0px',  backgroundColor:"#000",background: "rgba(0, 0, 0, 0.5)",textAlign:"center"}}>
                  <div style={{color:"#FFFFFF",fontSize:32,position: "absolute",left:"30%", top: "30%"}}><span >暂无位置和方向信息</span></div>
                </div>
              </Map>
            </Card>
            </div>
          ) : (
            <Card >
              <DescriptionList style={{marginBottom: 16}} col={2}>
                <Description term=""></Description>
                <Description term="实时路况">
                  <div>
                    <Switch defaultChecked onChange={this.openShishiRold}/>
                  </div>
                  <div>
                    <Badge status="error" text="拥堵"/>
                    <Badge status="warning" text="缓行"/>
                    <Badge status="success" text="通常"/>
                  </div>
                </Description>
              </DescriptionList>
              <Map center={{
                lng: JSON.parse(selectedRowData.positionCoor).lng ,
                lat: JSON.parse(selectedRowData.positionCoor).lat
              }} zoom="18">
                <Marker position={{
                  lng: JSON.parse(selectedRowData.positionCoor).lng ,
                  lat: JSON.parse(selectedRowData.positionCoor).lat
                }}/>
                <NavigationControl/>
                <MapTypeControl/>
                <ScaleControl/>
                <OverviewMapControl/>
                {
                  selectedRowData.positionName == null ? "" : <InfoWindow position={{
                    lng: JSON.parse(selectedRowData.positionCoor).lng ,
                    lat: JSON.parse(selectedRowData.positionCoor).lat
                  }} text={selectedRowData.positionName} title=""/>
                }
              </Map>
            </Card>
          )
        }

      </div>
    );
  }
}
export default MsgWeiXinDetail ;
